<template>
    <div class="content">
        <h1>品牌管理</h1>
        <!--资产管理列表-->
        <table class="table">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>资产名称</th>
                    <th>价格</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td :class="{red: item.price>=100 }">{{ item.price }}</td>
                    <td>{{ item.time }}</td>
                    <td><a href="#" @click="delFn(item.id)">删除</a></td>
                </tr>
                <tr>
                    <td>统计：</td>
                    <td colspan="2">总价格：{{ allprice }}</td>
                    <td colspan="2">平均价格：{{ avgprice }}</td>
                </tr>
            </tbody>

            <tfoot>
                <tr v-show="list.length == 0">
                    <td colspan="5" style="text-align: center">暂无数据</td>
                </tr>
            </tfoot>

        </table>
        <!--添加-->
        <form class="forms">
            <input type="text" placeholder="请输入资产名称" v-model.trim="name"></input><br>
            <br>
            <input type="text" placeholder="请输入价格" v-model.number="price"></input>
        </form>
        <button class="btn btn-primary" @click.prevent="addFn">添加资产</button>

    </div>
</template>
<script>
export default {
    data() {
        return {
            name: '',
            price:0,
            list: [
                { id: 101, name: 'Aj', price: 100, time: new Date("2025-02-20") },
                { id: 102, name: "鞋", price: 30, time: new Date('2023-11-22') },
                { id: 103, name: "头发", price: 100, time: new Date('2024-12-12') },
                { id: 104, name: "裤子", price: 90, time: new Date('2024-12-12') },
                { id: 105, name: "帽子", price: 30, time: new Date('2024-12-12') },
            ]
        }
    },
    methods: {
        //写的函数的地方
        addFn() { 
            // console.log("点击了添加按钮");
            // alert("添加成功");
            //判断name和price是否为空 如果为空弹出提示信息
            if(this.name=='' || this.price==0){
                alert("请输入资产名称和价格");
                return;
            }
            console.log(this.list[this.list.length -1].id+1);
            
            this.list.push({
                id: this.list[this.list.length - 1].id + 1,
                name: this.name,
                price: this.price,
                time:new Date()
            })
        },
        delFn(id) { 
            // 打印传入的 id
            console.log(id);
            // 在 this.list 中查找 id 相等的元素的索引
            let index = this.list.findIndex(item => { 
                // 返回 item 的 id 是否等于传入的 id
                return item.id == id
            })
            console.log(index);
            
            // 使用 splice 方法删除找到的元素
            this.list.splice(index,1)
        }

    },
    computed: {
        allprice() { 
            return this.list.reduce((sum,item)=>sum += Math.round(item.price),0)
        },
        avgprice() { 
            return (this.allprice / this.list.length).toFixed(2)
        }
    }
}

</script>
<style scoped>
*{
    margin: 0;
    padding: 0;

}
.content{
    width: 100%;
    height: 600px;
    background-color: darkgray;
    text-align: center;

    .table{
        border: 1px solid rgb(245, 220, 220);
        margin: 20px auto;
        /* display: flex; 
        justify-content: center;
        align-self: start; */

    }
    thead tr th{
        border: 2px solid rgb(237, 226, 226);
    }
    thead tr{
        font-size:25px ;
        font-weight: 700;
    }
    tbody tr td{
            border: 2px solid rgb(250, 249, 249);
        }
        input{
            width: 555px;
             height: 30px;
        }
        tbody tr{
                    font-size: 20px;

        }
    .btn{
        width: 100px;
        height: 30px;
    }
}
.red{
    color: red;
}
</style>